<template>
  <el-cascader
    :placeholder="placeholder"
    style="width:100%;"
    :options="statusOptions"
    :props="propsSetting"
    v-model="selectValue"
    clearable
    @change="onChange"
  >
  </el-cascader>
</template>

<script>
import { t } from '@src/locales';
import * as FieldApi from '@src/api/PassApi';
export default {
  name: 'search-status-select',
  inject: ['paasParams'],
  props: {
    placeholder: {
      type: String,
      default: t('report.customReportAggregate.pla7')
    },
    remoteMethod: {
      type: Function
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      propsSetting: {
        multiple: true,
        checkStrictly: true,
        value: 'code',
        label: 'name',
        children: 'childList',
        expandTrigger: 'hover'
      },
      statusOptions: [],
      selectedKeys: [],
      selectValue: this.value.slice(),
      formStatus: []
    };
  },
  watch: {
    value(newValue) {
      this.selectValue = newValue.slice();
    }
  },
  computed: {
    templateId(){
      return this.paasParams.paasFormTypeTemplateId()
    }
  },
  mounted() {
    this.getStatusNumReq();
  },
  methods: {
    /** 获取流程状态以及流程对应的数量 */
    getStatusNumReq() {
      if(!this.templateId) return
      const params = {
        appId: '',
        formTemplateId: this.templateId,
        isNumShow: true //true显示统计数量
      };
      FieldApi.statusNum(params)
        .then(res => {
          const { code, message, data = [] } = res;
          if (code == 0) {
            // 全部设置默认值
            data.forEach(item => {
              if (item.name == this.$t('common.base.all')) item.code = '';
              if (item.childList && item.childList.length == 0)
                delete item.childList;
            });
            this.statusOptions = data || [];
          } else {
            this.$message.warning(message);
          }
        })
        .catch(err => console.error('err', err));
    },
    updateSelectValue(value) {
      this.$emit('input', value);
    },
    onChange(value) {
      this.updateSelectValue(value);
    }
  }
};
</script>

<style lang="scss" scoped>
.search-status {
  .el-checkbox {
    margin-top: 8px;
  }
}
</style>
